<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  content?: string
  length?: number
  placement?: string
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  length: 10,
  placement: 'top'
})

const tooltip = ref<boolean>(false)
const show = ref<string>('')

watch(
  () => props.content,
  (newVal) => {
    if (newVal.length <= props.length) {
      tooltip.value = false
      show.value = props.content
    } else {
      tooltip.value = true
      show.value = `${props.content.substring(0, props.length)}...`
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <template v-if="tooltip">
    <el-tooltip :content="props.content" :placement="props.placement" effect="light">
      <span>{{ show }}</span>
    </el-tooltip>
  </template>
  <template v-else>
    <span>{{ show }}</span>
  </template>
</template>

<style lang="scss" scoped></style>
